<template>
  <div class="detail" style="border: 0px solid red;">
    <!-- 正文 -->


      <el-form :inline="true" :model="params" class="demo-form-inline" label-width="80px" :label-position="left">
        <el-form-item label="所属单位" prop="ldDeptId">
          <treeselect v-model="params.ldDeptId" :options="deptOptions" @input="deptChange" @select="selectDepart" :show-count="true" placeholder="请选择主管部门" style="width: 202px;font-size: 12px;" />
        </el-form-item>
        <el-form-item label="实验室" prop="labId">
          <el-select v-model="params.labId" placeholder="请选择实验室" clearable>
            <el-option v-for="dict in labIdOptions" :key="dict.labId" :label="dict.labName" :value="dict.labId" />
          </el-select>
        </el-form-item>
        <el-form-item label="检测项目" prop="ldType">
          <el-select v-model="params.ldType" placeholder="请选择检测项目" clearable>
            <el-option v-for="dict in ldTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item label="设备名称">
          <el-input v-model="params.ldName" placeholder="设备名称"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input  v-model="params.ldSpecifications"  style="width: 220px" placeholder="仪器规格"></el-input>
        </el-form-item>
        <el-form-item label="设备状态" prop="status">
          <el-select v-model="params.status" placeholder="请选择设备状态" clearable>
            <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

    <el-table :data="tableData" border style="width: 100%">
      <!-- :header-cell-style="{background:'#2a5caa',color:'#fff'}" -->
      <el-table-column label="设备图片" align="center" width="120">
        <template slot-scope="scope">
          <el-image style="width: 80px; height: 80px; border-radius: 10px" :src="scope.row.labImageUrl" :lazy="true" />
        </template>
      </el-table-column>
      <el-table-column prop="ldName" label="设备名称" width="120"></el-table-column>s
      <el-table-column prop="ldSpecifications" label="规格型号" width="120"></el-table-column>
      <el-table-column prop="ldType" align="center" label="检测项目" width="120" :formatter="ldTypeOptionsFormat">

      </el-table-column>
      <el-table-column prop="deptName" align="center" label="所属单位" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.deptName">
            {{ scope.row.deptName }}
          </div>
          <div v-else>
            未指定
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="labName" align="center" label="所属实验室" width="120"></el-table-column>
      <!--      <el-table-column align="center" label="仪器状态" width="100">-->
      <!--        <template slot-scope="scope">-->
      <!--          <div v-if="scope.row.ldInuseStatus">-->
      <!--            <el-tag>{{scope.row.ldInuseStatus==0?'可预约':'不可预约'}}</el-tag>-->
      <!--          </div>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column align="center" label="设备状态" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.status==0">
            <el-tag>设备正常</el-tag>
          </div>
          <div v-else>
            <el-tag type="warning">设备停用</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" align="center" label="预约">
        <template slot-scope="scope">

          <el-button type="primary" plain v-if="scope.row.status==0 && scope.row.ldInuseStatus == 0" @click="deviceYuyue(scope.row)">预约</el-button>
          <span v-if="scope.row.ldInuseStatus == 1" style="color: red">使用中</span>
          <span v-if="scope.row.ldInuseStatus == 2" style="color: red">维护保养</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding-bottom: 10px">
      <el-pagination style="float:right" @current-change="handleSizeChange" background="true" :page-sizes="[8, 12, 20, 32]" :page-size="8" layout=" prev, pager, next,sizes,jumper" :total="total" hide-on-single-page="true">
      </el-pagination>
    </div>

    <el-dialog :title="title" :visible.sync="open" width="60%" center :close-on-press-escape="false" :close-on-click-modal="false" top="5vh" @close="cloaseDialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px" size="mini">
        <el-divider content-position="left">设备预约信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实验标题" prop="ldoTitle" required="required">
              <el-input v-model="form.ldoTitle" placeholder="请输入实验标题" maxlength="100" style="width: 100%" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请单位" prop="ldoCompany" required="required">
              <el-input v-model="form.ldoCompany" placeholder="请输入申请单位" maxlength="100" style="width: 100%" show-word-limit suffix-icon="el-icon-tickets"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <br>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实验申请人" prop="ldoName" required="required">
              <el-input v-model="form.ldoName" placeholder="请输入实验申请人" maxlength="100" style="width: 100%" show-word-limit suffix-icon="el-icon-tickets"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="ldoPhone" required="required">
              <el-input v-model="form.ldoPhone" placeholder="请输入联系方式" maxlength="100" style="width: 100%" show-word-limit suffix-icon="el-icon-tickets"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <br>
        <br>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预计使用时间" prop="ldoStartDate" required="required">
              <el-date-picker v-model="form.ldoStartDate" placeholder="请输入使用时间" size="small" style="width: 100%" value-format="yyyy-MM-dd hh:mm:ss" type="datetime"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计截止时间" prop="ldoEndDate" required="required">
              <el-date-picker v-model="form.ldoEndDate" size="small" placeholder="请输入预计截止时间" style="width: 100%" value-format="yyyy-MM-dd hh:mm:ss" type="datetime"></el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
        <br>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实验数量" prop="sysl">
              <el-input-number size="medium" :min="1" :max="100" :value="1" style="width: 100%" label="请选择实验数量"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col :span="24">
            <el-form-item label="实验内容" prop="ldoContent" required="required">
              <el-input type="textarea" v-model="form.ldoContent" :rows="4" placeholder="请输入备注内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submitForm">确 定</el-button>

        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import {
  yuyue,
  devicelist,
  getLabList,
  treeselect,
  sysDictData,
  selectDictLabel,
} from "@/api/api";
import { getKey } from "@/utils/tools.js";
import router from "@/router/index.js";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: {
    Pagination,
    Treeselect,
  },
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      workList: [],
      tableData: [],
      fuZhuTableData: [],
      //部门
      deptOptions: [],
      labIdOptions: [],
      //检测项目
      ldTypeOptions: [],
      projectOptions: [],
      statusOptions: [
        {
          dictValue: "",
          dictLabel: "全部状态",
        },
        {
          dictValue: "0",
          dictLabel: "可用",
        },
        {
          dictValue: "1",
          dictLabel: "停用",
        },
      ],

      showSearch: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      showViewer: false,
      imgSrcList: [],
      // 总条数
      total: 100,
      // 表单参数
      form: {
        ldoUserId: "",
        ldoTaskNo: "2022",
        deptId: "",
        labId: "",
        ldImg: "",
        ldId: "",
        ldoEmail: "986807001@qq.com",
      },
      // 表单校验
      rules: {
        ldoCompany: [
          { required: true, message: "申请单位不能为空", trigger: "blur" },
        ],
        ldoName: [
          { required: true, message: "实验申请人不能为空", trigger: "blur" },
        ],
        ldoPhone: [
          {
            required: true,
            message: "申请人联系方式不能为空",
            trigger: "blur",
          },
        ],
        ldoStartDate: [
          { required: true, message: "预计使用时间不能为空", trigger: "blur" },
        ],
        ldoEndDate: [
          { required: true, message: "预计截止时间不能为空", trigger: "blur" },
        ],
        ldoTitle: [
          { required: true, message: "实验名称不能为空", trigger: "blur" },
        ],
        ldoContent: [
          { required: true, message: "实验内容不能为空", trigger: "blur" },
        ],
      },
      //  参数
      params: {
        pageNum: 1,
        pageSize: 8,
        ldDeptId: null,
        labIdOptions: [],
        labId: null,
        ldType: null,
        ldName: null,
        status: null,
        ldInuseStatus: "0",
      },
    };
  },
  created() {
    this.getList();
    this.getTreeselect();
    this.getLdTypeOptions("sys_device_type");
  },
  methods: {
    handleSizeChange(e) {
      console.log(e);
      this.params.pageNum = e;
      this.tableData = [];
      this.getList();
    },
    ldTypeOptionsFormat(row, column) {
      return selectDictLabel(this.ldTypeOptions, row.ldType);
    },
    getList() {
      let data = this.params;
      devicelist(data).then((res) => {
        this.total = res.total;
        this.tableData = res.rows;
      });
    },
    Gohome() {
      this.$router.push("home");
    },
    deviceYuyue(row) {
      if (getKey("token")) {
        this.form.deptId = row.ldDeptId;
        this.form.labId = row.labId;
        this.form.ldImg = row.ldImg;
        this.form.ldId = row.ldId;
        this.open = true;
        this.title = row.ldName + "预约";
      } else {
        this.$alert("未登录", "提示", {
          confirmButtonText: "确定",
          callback: () => {
            router.push({
              path: "/login",
            });
          },
        });
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cloaseDialog() {
      // this.open = false;
      // this.$refs.cropper.clearFiles();
      // this.uploadBtn = 'none';
      // this.labDeviceTabName='labBaseInfo';
    },
    reset() {
      this.params.ldType = null;
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          yuyue(this.form).then((res) => {
            if (res.code == 200) {
              this.msgSuccess("预约成功");
              this.resetForm("form");
              this.open = false;
            }
          });
        }
      });
    },
    resetForm() {
      this.form = {
        ldoUserId: "",
        ldoTaskNo: "2022",
        deptId: "",
        labId: "",
        ldImg: "",
        ldId: "",
        ldoEmail: "986807001@qq.com",
        ldType: "",
      };
    },

    rowClassName({ row, rowIndex }) {
      row.xh = rowIndex + 1;
    },
    handleAddDetails() {
      if (this.fuZhuTableData == undefined) {
        this.fuZhuTableData = new Array();
      }
      let obj = {};
      obj.fzsbmcjxh = "矿物分析电镜 | ZEISS Merlin";
      obj.fzsbbh = "WXS-CEHNGCANG-002";
      obj.fzsbzrr = "张彩明";
      this.fuZhuTableData.push(obj);
    },
    handleDeleteDetails(row) {
      this.fuZhuTableData.splice(row.xh - 1, 1);
    },
    handleDeleteAllDetails() {
      this.fuZhuTableData = undefined;
    },
    deptChange(val) {
      if (val != null) {
        getLabList(val).then((response) => {
          if (response.data != null) {
            this.labIdOptions = response.data;
          } else {
            this.labIdOptions.splice(0, this.labIdOptions.length);
            this.params.labId = "";
          }
        });
      } else {
        this.labIdOptions.splice(0, this.labIdOptions.length);
        this.params.labId = "";
      }
    },
    selectDepart(val) {
      this.params.ldDeptId = val.id;
      this.getInDeptLabList();
    },
    //获取实验室
    getInDeptLabList() {
      let deptId = this.params.ldDeptId;
      if (deptId == null || deptId == "") {
        deptId = -1;
      }
      let data = {
        deptId: deptId,
      };
      getLabList(data).then((response) => {
        if (response.data != null) {
          this.labIdOptions = response.data;
        } else {
          this.labIdOptions.splice(0, this.labIdOptions.length);
          this.params.labId = "";
        }
      });
    },
    getTreeselect() {
      treeselect().then((response) => {
        if (response.data != null) {
          this.deptOptions = response.data;
        } else {
          this.$message.error(response);
        }
      });
    },
    handleQuery() {
      this.params.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.params.pageNum = 1;
      this.params.ldDeptId = null;
      this.params.labId = null;
      this.params.labIdOptions = null;
      this.params.status = null;
      this.params.ldName = null;
      this.params.ldType = null;
      this.handleQuery();
    },
    getLdTypeOptions(dictType) {
      let data = {
        dictType: dictType,
      };
      sysDictData(data).then((response) => {
        if (response.data != null) {
          this.ldTypeOptions = response.data;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.el-form-item {
  margin-bottom: 10px;
}
.el-dialog__body {
  padding: 10px !important;
}
.el-pagination {
  margin-left: auto !important;
  margin-right: auto !important;
}
.block {
  margin-top: 10px;
}
.s_form {
  padding: 10px;
}
.detail {
  width: 100%;
  margin: 0 auto;
}
.container {
  width: 100%;
  margin: 0 auto;
}
.title-tab {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 54px;
  cursor: pointer;
}
.red {
  color: red;
}
.zhengwen {
  width: 100%;
  background-color: white;
  padding: 60px;
  box-sizing: border-box;
}
p {
  text-indent: 2em;
  font-size: 16px;
  color: #333333;
  margin-top: 20px;
}
p:nth-child(1) {
  text-indent: 0;
}
h1 {
  text-align: center;
  font-size: 28px;
  color: #333333;
}
.first {
  text-align: center;
  font-size: 16px;
  color: #999999;
  margin-top: 28px;
  margin-bottom: 30px;
}
.daohang {
  margin: 20px 0;
}
.third {
  margin-right: 20px;
}
.jianjiebanner {
  background: url(../../../assets/image/shiyanshebeibanner.png);
}
</style>
